<template>
    <div>
        <el-upload
                action="https://localhost/"
                :before-upload="parseFile"
                :limit="1"
                accept=".xlsx,.xls"
                :show-file-list="false"
                class="long">
            <el-button type="primary" size="mini" class="long">导入数据</el-button>
        </el-upload>
        <el-dialog
                title="选择数据表"
                :visible.sync="showSelectSheetDialog"
                :append-to-body="true"
                @closed="clearUploadData"
                center>
            <el-select v-model="selectedSheetIndex" size="small">
                <el-option v-for="(index, name) in sheetNameOptions" :key="index" :label="index"
                           :value="name"></el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="selectSheet" class="long">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import XLSX from 'xlsx';

    function fixdata(data) { //文件流转BinaryString
        var o = "",
            l = 0,
            w = 10240;
        for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
        return o;
    }

    export default {
        name: "UploadFile",
        data() {
            return {
                showSelectSheetDialog: false,
                sheetNameOptions: [],
                selectedSheetIndex: 0,
                wb: null,
            }
        },
        methods: {
            selectSheet() {
                let data = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[this.selectedSheetIndex]]);
                // eslint-disable-next-line no-console
                // console.log(data);
                this.$store.dispatch('reset', data).then(() => {
                    this.$utils.AppMessage.success('导入成功');
                    this.showSelectSheetDialog = false;
                    this.wb = null;
                });
            },
            parseFile(file) {
                let rABS = false;
                let fileReader = new FileReader();
                fileReader.onload = (e) => {
                    let rawData = e.target.result;
                    if (rABS) {
                        this.wb = XLSX.read(btoa(fixdata(rawData)), {//手动转化
                            type: 'base64'
                        });
                    } else {
                        this.wb = XLSX.read(rawData, {
                            type: 'binary'
                        });
                    }
                    this.sheetNameOptions = this.wb.SheetNames;
                    this.showSelectSheetDialog = true;
                };
                if (rABS) {
                    fileReader.readAsArrayBuffer(file);
                } else {
                    fileReader.readAsBinaryString(file);
                }
            },
            clearUploadData() {
                this.wb = null;
                this.sheetNameOptions = [];
            },
//            parseFile(file) {
//                let wb;
//                let rABS = false;
//                let fileReader = new FileReader();
//                fileReader.onload = (e) => {
//                    let rawData = e.target.result;
//                    if (rABS) {
//                        wb = XLSX.read(btoa(fixdata(rawData)), {//手动转化
//                            type: 'base64'
//                        });
//                    } else {
//                        wb = XLSX.read(rawData, {
//                            type: 'binary'
//                        });
//                    }
////                    let data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
//                    // eslint-disable-next-line no-console
//                    // console.log(data);
//                    this.$store.dispatch('reset', data).then(() => {
//                        this.$utils.AppMessage.success('导入成功');
//                    });
//                };
//                if (rABS) {
//                    fileReader.readAsArrayBuffer(file);
//                } else {
//                    fileReader.readAsBinaryString(file);
//                }
//            }
        }
    }
</script>

<style scoped>
    .long {
        width: 100%;
    }

    .el-select {
        width: 100%;
    }

    /*.el-upload {*/
    /*    width: 100%;*/
    /*}*/
</style>